<template>
  <div id="anchor">
    <div data-name="base">基础用法</div>
    <div data-name="styleClass">样式类名</div>
    <div data-name="toolbar">工具栏</div>
    <div data-name="hideHeader">隐藏顶部工具栏</div>
    <div data-name="column-type">特殊列(全选/展开/操作)</div>
    <div data-name="batchs">批量操作</div>
    <div data-name="pager">分页</div>
    <div data-name="sort">排序</div>
    <div data-name="filter">筛选</div>
    <div data-name="otherFilter">外部筛选</div>
    <div data-name="custom">自定义插槽渲染</div>
    <div data-name="render">自定义函数渲染</div>
    <div data-name="summary">合计行</div>
    <div data-name="scroll">禁用虚拟滚动</div>
    <div data-name="tree">父子层级树结构列表</div>
    <div data-name="treeChildren">树层级树结构列表</div>
    <div data-name="ajax">数据代理</div>
    <div data-name="api">API</div>
  </div>
  <h4 id="base">基础用法</h4>
  <Base>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </Base>
  <h4 id="styleClass">样式类名</h4>
  <StyleClass>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </StyleClass>
  <h4 id="toolbar">工具栏</h4>
  <Toolbar>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </Toolbar>
  <h4 id="hideHeader">隐藏顶部插槽及工具栏</h4>
  <HideHeader>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </HideHeader>
  <h4 id="column-type">特殊列</h4>
  <ColumnType>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </ColumnType>
  <h4 id="batchs">批量操作</h4>
  <Batchs>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </Batchs>
  <h4 id="pager">分页</h4>
  <Pager>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </Pager>
  <h4 id="sort">排序</h4>
  <Sort>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </Sort>
  <h4 id="filter">筛选</h4>
  <Filter>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </Filter>
  <h4 id="otherFilter">外部筛选</h4>
  <OtherFilter>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </OtherFilter>
  <h4 id="custom">自定义插槽渲染</h4>
  <Custom>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </Custom>
  <h4 id="render">自定义函数渲染</h4>
  <Render>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </Render>
  <h4 id="summary">合计行</h4>
  <Summary>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </Summary>
  <h4 id="scroll">禁用虚拟滚动</h4>
  <Scroll>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </Scroll>
  <h4 id="tree">父子层级树结构列表</h4>
  <Tree>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </Tree>
  <h4 id="treeChildren">树层级树结构列表</h4>
  <TreeChildren>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </TreeChildren>
  <h4 id="ajax">数据代理</h4>
  <Test>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </Test>
  <h4 id="api">API</h4>
  <Api>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </Api>
  <h4>FQA</h4>
  <ul>
    <li>1. 关于展开行</li>
    <li>vxe 虚拟滚动不允许设置展开行操作，暂定解决办法为弹窗展示。</li>
    <li>2. 关于单元格动态宽度</li>
    <li>
      vxe 并未暴露运行时函数，针对表头可以根据其内容计算不精准的宽度，因为 vxe 本质上还是使用的 table layout = fixed
      的设置，但是表数据因虚拟滚动实际上部分 dom 还未插入，在没有运行时函数的情况下无法动态计算。
    </li>
    <li>3. 关于折行及动态高度</li>
    <li>
      vxe 虚拟滚动后仅支持等行高，因此内置数据展示不允许折行，目前可通过自定义插槽避开无法折行的问题，但同时需要设置固定行高
    </li>
    <li>4. 关于合并行或列</li>
    <li>因为有列设置存在，目前的设想是在操作列设置后重新计算合并方法</li>
  </ul>
</template>

<script setup lang="ts">
import { onMounted, nextTick } from "vue";

import Base from "./Base.vue";
import StyleClass from "./StyleClass.vue";
import Test from "./Test.vue";
import Toolbar from "./Toolbar.vue";
import HideHeader from "./HideHeader.vue";
import ColumnType from "./ColumnType.vue";
import Batchs from "./Batchs.vue";
import Pager from "./Pager.vue";
import Sort from "./Sort.vue";
import Filter from "./Filter.vue";
import OtherFilter from "./OtherFilter.vue";
import Custom from "./Custom.vue";
import Render from "./Render.vue";
import Summary from "./Summary.vue";
import Scroll from "./Scroll.vue";
import Tree from "./Tree.vue";
import TreeChildren from "./TreeChildren.vue";
import Api from "./Api.vue";

import dropWrap from "../../dropWrap.vue";

import Prism from "prismjs";

onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
    document.getElementById("anchor")!.addEventListener("click", e => {
      const target = (e.target as Element).getAttribute("data-name");
      if (!target) return;
      const node = document.getElementById(target);
      if (!node) return;
      node.scrollIntoView({ behavior: "smooth" });
    });
  });
});
</script>

<style scoped lang="scss">
#anchor {
  position: fixed;
  top: 20px;
  right: 5px;
  padding: 10px;
  min-width: 120px;
  font-size: 12px;
  border-radius: var(--el-border-radius-base);
  box-shadow: var(--el-box-shadow);
  & > :not(:first-child) {
    margin-top: 5px;
  }
  & > * {
    padding: 2px 4px;
    transition: background-color 0.5s;
    cursor: pointer;
    &:hover {
      background-color: var(--el-menu-item-hover-fill);
    }
  }
}
li {
  list-style: none;
  &:nth-child(2n) {
    text-indent: 40px;
  }
}
</style>
